<template>
  <div class="flex h-screen bg-gray-50">
    <!-- 侧边栏 -->
    <div 
      :class="[
        'bg-white shadow-sm border-r border-gray-200 transition-all duration-300',
        collapsed ? 'w-16' : 'w-64'
      ]"
    >
      <!-- 侧边栏头部 -->
      <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200">
        <div v-if="!collapsed" class="flex items-center">
          <img class="h-8 w-8" src="/vite.svg" alt="Logo">
          <span class="ml-2 text-lg font-semibold text-gray-900">{{ title }}</span>
        </div>
        <button 
          @click="toggleCollapse"
          class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
        >
          <Bars3Icon v-if="collapsed" class="h-5 w-5 text-gray-600" />
          <XMarkIcon v-else class="h-5 w-5 text-gray-600" />
        </button>
      </div>

      <!-- 导航菜单 -->
      <nav class="mt-4 px-2">
        <div class="space-y-1">
          <template v-for="item in menuItems" :key="item.name">
            <!-- 单级菜单 -->
            <router-link
              v-if="!item.children"
              :to="item.path"
              :class="[
                'nav-link',
                isActive(item.path) ? 'nav-link-active' : 'nav-link-inactive'
              ]"
            >
              <component :is="item.icon" class="h-5 w-5 flex-shrink-0" />
              <span v-if="!collapsed" class="ml-3">{{ item.name }}</span>
            </router-link>

            <!-- 多级菜单 -->
            <Disclosure v-else v-slot="{ open }" as="div">
              <DisclosureButton
                :class="[
                  'nav-link w-full',
                  hasActiveChild(item) ? 'nav-link-active' : 'nav-link-inactive'
                ]"
              >
                <component :is="item.icon" class="h-5 w-5 flex-shrink-0" />
                <span v-if="!collapsed" class="ml-3 flex-1 text-left">{{ item.name }}</span>
                <ChevronRightIcon 
                  v-if="!collapsed"
                  :class="[
                    'h-4 w-4 transition-transform',
                    open ? 'rotate-90' : ''
                  ]"
                />
              </DisclosureButton>
              
              <DisclosurePanel v-if="!collapsed" class="mt-1 space-y-1">
                <router-link
                  v-for="child in item.children"
                  :key="child.name"
                  :to="child.path"
                  :class="[
                    'nav-link pl-11',
                    isActive(child.path) ? 'nav-link-active' : 'nav-link-inactive'
                  ]"
                >
                  {{ child.name }}
                </router-link>
              </DisclosurePanel>
            </Disclosure>
          </template>
        </div>
      </nav>

      <!-- 侧边栏底部 -->
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
        <slot name="footer">
          <div v-if="!collapsed" class="text-xs text-gray-500 text-center">
            © 2024 新生报到服务平台
          </div>
        </slot>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import { 
  Bars3Icon, 
  XMarkIcon, 
  ChevronRightIcon 
} from '@heroicons/vue/24/outline'

const props = defineProps({
  title: {
    type: String,
    default: '管理系统'
  },
  menuItems: {
    type: Array,
    required: true
  }
})

const route = useRoute()
const collapsed = ref(false)

const toggleCollapse = () => {
  collapsed.value = !collapsed.value
}

const isActive = (path) => {
  return route.path === path || route.path.startsWith(path + '/')
}

const hasActiveChild = (item) => {
  if (!item.children) return false
  return item.children.some(child => isActive(child.path))
}
</script>